<template>
  <div
    v-loading="loading"
    class="swiper-detail"
  >
    <!--内容部分-->
    <div
      v-if="detailData"
      class="swiper-detail-container"
    >
      <el-button
        @click="closeDetail(detailData.newsId)"
        class="el-dialog__close jeicon jeicon-rejected"
      />
      <div
        id="waterContent"
        v-if="detailData.isOpenSY"
        class="swiper-detail-con-box"
        style="position:relative;"
      >
        <div
          v-if="detailData.isOpenSY"
          style="position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;"
        />
        <p class="swiper-detail-title">
          {{ detailData.newsTitle }}
        </p>
        <p style="text-align:center;color:#999">
          {{ detailData.userName }}  ·  {{ detailData.partName }}  ·  {{ detailData.time }}  ·  阅读{{ detailData.ydsl }}
        </p>
        <div
          v-if="!detailData.newType"
          v-html="detailData.con"
          onselectstart="return false;"
          ondragstart="return false;"
          unselectable="on"
          class="swiper-detail-con"
        />
      </div>
      <div
        v-else
        class="swiper-detail-con-box"
        style="position:relative;"
      >
        <p class="swiper-detail-title">
          {{ detailData.newsTitle }}
        </p>
        <p style="text-align:center;color:#999">
          {{ detailData.userName }}  ·  {{ detailData.partName }}  ·  {{ detailData.time }}  ·  阅读{{ detailData.ydsl }}
        </p>
        <div
          v-if="!detailData.newType"
          v-html="detailData.con"
          class="swiper-detail-con"
        />
      </div>
      <div
        id="pdfBox"
        v-if="detailData.newType"
        style="margin:20px 0;height:800px;"
      />
      <p class="swiper-detail-btn">
        <el-button
          @click="doZan"
          :class="{'isDz':detailData.isDz=='1'}"
        >
          <i
            class="jeicon jeicon-thumbs-up-o"
          />
          <span @click.stop="getZanNum(detailData.newsId)">({{ detailData.dzsl }})
          </span>
        </el-button>
        <el-button
          @click="replayComment()"
          v-if="detailData.isOpenPl"
        >
          <i class="jeicon jeicon-feedback1" />({{ detailData.plsl }})
        </el-button>
        <!--数字弹出列表-->
        <el-dialog
          id="portal-zan-list"
          :visible.sync="centerDialogVisible"
          :title="'点赞('+detailData.dzsl+')'"
          width="800"
          height="300"
          append-to-body
        >
          <ul
            class="swiper-dialog"
          >
            <li
              v-for="zan in zanList"
              :key="zan"
            >
              <span
                v-html="zan.zanUserPhoto"
                class="userPhoto"
              />
              <p class="con">
                <span>{{ zan.zanName }}</span>
                <span>{{ zan.zanTime }}</span>
              </p>
            </li>
          </ul>
          <p class="li-border" />
          <span
            slot="footer"
            class="dialog-footer"
            style="display: flex;justify-content: center;margin-top:20px;"
          >
            <el-button @click="centerDialogVisible = false">关  闭</el-button>
          </span>
        </el-dialog>
      </p>
      <div
        v-if="detailData && detailData.fj.length"
        class="swiper-files"
      >
        <span class="swiper-files-title"><i class="jeicon jeicon-attachment-o" />附件({{ detailData.fj.length }})</span>
        <p
          v-for="file in detailData.fj"
          :key="file.id"
          class="swiper-file"
        >
          <i class="jeicon jeicon-word" />{{ file.name }}
          <span @click="downLoad(file)">下载</span>
          <span @click="preview(file)">预览</span>
          <el-popover
            v-model="file.popoverVisible"
            title="分享链接"
            placement="bottom"
            width="300"
            trigger="manual"
          >
            <p style="margin-bottom: 10px">
              {{ sharePath }}
            </p>
            <div style="text-align: right; margin: 0">
              <el-button
                @click="copyLink(file)"
                type="primary"
                size="mini"
              >
                复制链接
              </el-button>
              <el-button
                @click="file.popoverVisible = false"
                size="mini"
                type="text"
              >
                关闭
              </el-button>
            </div>
            <span
              slot="reference"
              v-if="detailData.XW_SFBM_CODE"
              @click="doShare(file)"
            >分享</span>
          </el-popover>
        </p>
      </div>
    </div>
    <!--评论部分-->
    <div
      v-if="detailData.isOpenPl"
      class="swiper-detail-comment "
    >
      <div
        class="swiper-detail-comment-tt"
      >
        <span class="swiper-files-title addCommet">
          <i class="jeicon jeicon-feedback1" />参与评论
        </span>
        <el-input
          ref="textarea"
          v-model="message"
          maxlength="1000"
          type="textarea"
          class="swiper-textarea"
          cols="30"
          rows="8"
          placeholder="填写评论内容..."
        />
        <div class="swiper-files-addComment">
          <p class="swiper-files-add-rb">
            <span @click.stop="showEmoji"><i
              ref="emojiBtn"
              class="jeicon jeicon-smile"
            />表情</span>
            <popover
              :visible="visibleEmojiInfo"
              :trigger-el="triggerEl"
              @select="selectEmoji"
            />
            <!-- <span>
              <i
                @click="selectImage"
                class="jeicon jeicon-image-o"
              />选择图片
              <span
                v-for="(file,index) in selectImages"
                :key="index"
                class="selectImages"
              >
                {{ file.name }} <span
                  @click="removeImage(file,index)"
                  class="remove"
                >x</span>
              </span></span> -->
          </p>
          <p class="swiper-files-add-lb">
            <span>{{ messageLength }}/1000</span>
            <el-button @click.stop="addComment(isMe)">
              提交评论
            </el-button>
          </p>
        </div>
      </div>
      <div class="swiper-detail-comment-bt">
        <ul v-if="comment.length">
          <li
            v-for="commentItem in comment"
            :key="commentItem"
          >
            <span
              v-html="commentItem.sendId"
              class="user-photo"
            />
            <span class="user-time">{{ commentItem.sendTime }}</span>
            <div class="user-comment-container">
              <p class="user-name">
                {{ commentItem.sendName }}
              </p>
              <p
                v-html="commentItem.con"
                class="user-comment"
              />
              <p
                class="user-replay"
              >
                <span
                  v-if="!commentItem.isMe"
                  @click="replayComment(commentItem,commentItem.isMe)"
                ><i
                  class="jeicon jeicon-message"
                />回复</span>
                <span
                  v-else
                  @click="replayComment(commentItem,commentItem.isMe)"
                ><i
                  class="fa fa-trash-o"
                />删除</span>
              </p>
            </div>
          </li>
        </ul>
        <!-- <p v-else>
          暂时没有评论消息
        </p> -->
      </div>
    </div>
  </div>
</template>
<script>
import {
  fetchNewsDetail, fetchComment, fetchZan, fetchAddComment,
  fetchDeleteComment, fetchZanNum,
} from '../../common/portal';
import { EventBus } from '../../common/eventBus';
import { COMMON } from '../../common/params';
import Popover from '../../../../components/emoji/index';
// import Popover from '../../../../components/inputModal/inputModal';';
import wartermark from './wartermark';

JE.loadScript('/static/ux/PDFObject/pdfobject.min.js');

export default {
  name: 'PageDeail',
  components: {
    Popover,
  },
  data() {
    return {
      detailData: '',
      message: '',
      comment: [],
      userName: '',
      visibleEmojiInfo: false,
      triggerEl: '',
      selectImages: [],
      zanList: [],
      loading: true,
      centerDialogVisible: false,
      sy: false,
      sharePath: '',
      linkVisible: false,
    };
  },
  computed: {
    messageLength() {
      return this.message.length;
    },
  },
  destroyed() {},
  mounted() {
    window._JE_PDF_WATERMARK_HIDE = this.sy;
    EventBus.$on(COMMON.NEWSDEATIL, async (target) => {
      this.$set(this, 'detailData', '');
      this.getPage({ JE_MHXW_XW_ID: target });
      this.comment = await fetchComment({
        JE_MHXW_XW_ID: target,
        start: 0,
        limit: 1000,
      });
    });

    // var options = {
    // pdfOpenParams: {
    // navpanes: 0,
    // toolbar: 0,
    // statusbar: 0,
    // page: 1,
    // },
    // forcePDFJS: true,
    // PDFJS_URL: "/static/ux/pdf/web/viewer.html"
    // };
  },
  methods: {
    async getZanNum(newsId) {
      this.zanList = await fetchZanNum({ JE_MHXW_XW_ID: newsId });
      if (this.zanList.length) {
        this.centerDialogVisible = true;
      } else {
        JE.msg('暂时没有其他人赞！');
      }
    },
    getHTML(html) {
      if (JE.isEmpty(html)) {
        return '<div class="empty-text"></div>';
      }
      html = JE.buildUeditorImgUrl(html);
      return html.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    },
    // removeImage(file, index) {
    //   this.selectImages.splice(index, 1);
    // },
    /**
     * 选择图片
     */
    // selectImage() {
    //   const me = this;
    //   JE.uploadFile({
    //     fileTypes: 'jpg;png;gif;jpeg',
    //     params: {
    //       returnType: 'all',
    //       jeFileType: 'PROJECT',
    //     },
    //     callback(file) {
    //       delete file.docInfo;
    //       delete file.size;
    //       me.selectImages = [file];
    //     },
    //   });
    // },
    selectEmoji(emoji) {
      this.message += emoji;
    },
    showEmoji() {
      this.visibleEmojiInfo = !this.visibleEmojiInfo;
      this.triggerEl = this.$refs.emojiBtn;
    },
    closeDetail(newsId) {
      this.$set(this, 'detailData', '');
      this.message = '';
      EventBus.$emit(COMMON.CLOSEPAGE, newsId);
    },
    async getPage(parmas) {
      const detailData_ = await fetchNewsDetail(parmas);
      if (detailData_.fj) {
        detailData_.fj.forEach((em) => {
          em.popoverVisible = false;
        });
      }
      window._JE_PDF_WATERMARK_HIDE = detailData_.isOpenSY;
      if (detailData_.newType) {
        this.$set(this, 'detailData', detailData_);
        const getDivdsq = setInterval(() => {
          if (document.getElementById('pdfBox')) {
            const viewer = 'static/ux/pdf/web/viewer.html';
            const options = {
              pdfOpenParams: {
                navpanes: 0,
                toolbar: 0,
                statusbar: 0,
                page: 1,
              },
              forcePDFJS: true,
              PDFJS_URL: JE.ElectronUtil.enable ? viewer : `/${viewer}`,
            };
            PDFObject.embed(detailData_.con, '#pdfBox', options);
            clearInterval(getDivdsq);
          }
        });
      } else {
        detailData_.con = this.getHTML(detailData_.con);
        this.$set(this, 'detailData', detailData_);
      }
      this.loading = false;
      if (this.detailData.isOpenSY) {
        const curDate = new Date();
        const curTime = `${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}`;
        wartermark.set(curTime, JE.currentUser.username, 'waterContent', 'add');
      }
    },
    async doZan() {
      const zan = await fetchZan({ JE_MHXW_XW_ID: this.detailData.newsId });
      this.$set(this.detailData, 'isDz', zan.isDz);
      this.$set(this.detailData, 'dzsl', zan.dzsl);
    },
    downLoad(file) {
      const $a = document.createElement('a');
      const path = JE.getFileUrl(file.path);
      $a.setAttribute('href', path);
      $a.setAttribute('download', file.name);
      $a.click();
    },
    preview(file) {
      JE.File.doAct('preview', '', '', file.path, file.name);
    },
    // 附件分享
    doShare(fl) {
      const that = this;
      JE.ajax({
        url: '/je/docShare/getShare',
        params: {
          fileKey: fl.path,
        },
        async: true,
        success(data) {
          const response = Ext.decode(data.responseText);
          if (response.success) {
            fl.popoverVisible = true;
            that.sharePath = window.location.origin + response.obj;
          }
        },
      });
    },
    // 复制链接
    copyLink(fl) {
      fl.popoverVisible = false;
      JE.copy(this.sharePath);
    },
    async addComment(isMe) {
      this.visibleEmojiInfo = false;
      if (JE.isEmpty(this.message.trim())) {
        this.replayComment('', isMe);
        return JE.msg('内容不能为空！');
      }
      const addComment = await fetchAddComment({
        JE_MHXW_XW_ID: this.detailData.newsId,
        PL_PLNR: this.message.replaceAll(`@${this.userName}`, `<span class="replayCommet" style="color:#007aff;margin-right:10px;">@${this.userName}</span>`),
      });
      this.comment.unshift(addComment);
      this.message = '';
      // 此处刷新数量 detailData.plsl
      this.$set(this.detailData, 'plsl', this.detailData.plsl += 1);
    },
    replayComment(data, isMe) {
      const that = this;
      if (isMe) {
        JE.confirm('确认删除当前评论吗？', async (btnn) => {
          if (btnn == 'ok') {
            const deleteComment = await fetchDeleteComment({
              JE_MHXW_XW_ID: data.newsId,
              JE_MHXW_PL_ID: data.plId,
            });
            that.comment = that.comment.filter(item => item.plId != deleteComment.plId);
            that.$set(that.detailData, 'plsl', that.detailData.plsl -= 1);
          }
        });
      } else {
        if (data) {
          this.$refs.textarea.value = `@${data.sendName} `;
          this.userName = data.sendName;
        }
        this.$refs.textarea.focus();
      }
    },
  },
};
</script>
<style>
table{
    border-collapse: collapse;
    border-spacing: 0;
}
</style>
<style lang="scss" scoped>
@import './portalDetail.css';
.swiper-detail{
  background: #fff;
  width: 100%;
  /* height: 100%; */
  .user-photo{
    margin-right:10px;
  }
  .swiper-detail-container,.swiper-detail-comment{
    width: 1250px;
    margin:0 auto;
    .swiper-detail-title{
      font-size: 24px;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      color: #424242;
    }
  }
  .swiper-detail-container{
    position: relative;
    padding-top:40px;
    .el-button.el-icon-close{
      position: absolute;
      left:right;
      top:0;
    }
    .swiper-detail-con{
      margin:20px 0;
      min-height:300px;
      overflow: hidden;
      // -webkit-touch-callout: all; /* iOS Safari */
      // -webkit-user-select: all; /* Chrome/Safari/Opera */
      // -khtml-user-select: all; /* Konqueror */
      // -moz-user-select: all; /* Firefox */
      // -ms-user-select: all; /* Internet Explorer/Edge */
      // user-select: all; /* Non-prefixed version, currently

      // not supported by any browser */
    }
    .swiper-detail-btn{
      width: 300px;
      margin: 20px auto;
      display: flex;
      justify-content:center;
      .el-button{
        border:1px solid #007aff;
        color: #007aff;
        margin:0 40px;
        .jeicon{
          margin-right:10px;
        }
      }
      .closeRed{
          color: #fff;
          background: #E94B4D!important;
          border-radius: 50%;
          width: 20px;
          height:20px;
          line-height: 18px;
          text-align: center;
          position: absolute;
          right: 18px;
          top: 18px;
          cursor: pointer;
        }
      .el-button.isDz{
        background: #007aff;
        color: #fff;
      }
    }
    .swiper-files{
      margin:10px 0;
      border-top:1px solid #ddd;
      border-bottom:1px solid #ddd;
      padding:10px 0;
      .swiper-files-title{
        font-size: 18px;
        line-height: 40px;
        .jeicon{
          color: #007aff;
          margin-right:10px;
          font-size: 18px;
        }
      }
      .swiper-file{
        color: #999;
        .jeicon{
          color: #007aff;
          font-size: 24px;
          line-height: 30px;
          margin-right:10px;
          cursor: pointer;
        }
        span{
          color: #007aff;
          margin:0 10px;
          cursor: pointer;
        }
        a{
          text-decoration: none;
          color: #007aff;
        }
      }
    }
  }
  .swiper-detail-comment{
    margin-top:20px;
    .swiper-detail-comment-tt{
      font-size: 16px;
      display: flex;
      flex-direction: column;
      .swiper-textarea{
        margin-bottom: 10px;
        .el-input__inner{
          padding:4px 10px;
          height:80px;
        }
      }
      .swiper-files-title{
        margin-bottom: 10px;
        font-size: 18px;
        .jeicon{
          color: #007aff;
          margin-right:10px;
          margin-bottom:10px;
        }
      }
      .swiper-files-addComment{
        display: flex;
        justify-content:space-between;
        color: #999;
        .el-button--default{
          background: #007aff;
          color: #fff;
          margin-left:10px;
        }
        .swiper-files-add-rb{
          cursor: pointer;
          .jeicon{
            margin-right:10px;
          }
        }
      }
    }
    .swiper-detail-comment-bt{
      margin-top:20px;
      margin-bottom:20px;
      ul{
        list-style: none;
        padding: 0;
        margin: 0;
        li{
          display: flex;
          position: relative;
          margin:10px 0;
          .user-time{
            position: absolute;
            right:0;
            top:0;
            color: #999;
          }
          .user-comment-container{
            display: flex;
            flex-direction: column;
            border-bottom:1px solid #ddd;
            flex:1;
            padding-bottom:0;
            font-size: 14px;
            .user-name{
              line-height: 24px;
            }
            .user-comment{
              margin:4px 0;

            }
            .user-replay{
              line-height: 20px;
              color: #ddd;
              span{
                cursor: pointer;
              }
              .jeicon,.fa{
                margin-right:10px;
              }
            }
          }
        }
        li:last-child .user-comment-container{
          border-bottom: none;
        }
      }
    }
  }
}
</style>
